<template>
	<div class="outer">
		<div class="chart-card">
			<div class="cart-header" :style="{'background': headBgColor}">
				<slot name="header"/>
			</div>
			<div class="chart-title">
				<span class="title">{{ name }}</span>
			</div>
			<div class="chart-main">
				<slot name="main"/>
			</div>
			<div class="chart-footer">
				<slot name="footer"/>
			</div>
		</div>
	</div>
</template>

<script>
  export default {
    name: 'CommonCard',
    props: {
      headBgColor: {
        type: String,
        default: 'linear-gradient(60deg, #66bb6a, #43a047);'
      },
      name: {
        type: String,
        default: '',
        height: '',
      }
    }
  }
</script>

<style scoped>
  .outer {
    margin-top: 50px;
    display: flex;
    width: 100%;
  }
  .chart-card {
    width: 100%;
    border-radius: 3px;
    margin: auto;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    background-color: #fff;
  }
  .cart-header {
    border-radius: 3px;
    background: linear-gradient(60deg, #54c2f5, #1a82e4);
    width: calc(100% - 30px);
    margin: -20px auto 0;
    box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
  }
  .chart-title {
    display: block;
    width: 100%;
    color: rgba(0, 0, 0, 0.87);
    font-size: 18px;
    font-family: Roboto;
    padding: 15px 20px;
  }
  .chart-main {
    padding: 0 20px 15px;
  }
  .chart-footer {
    padding: 0 20px 15px;
  }
</style>